import React, { Component } from 'react';
import { user_login } from '../utils/api'
import { Button, Space, Toast } from 'antd-mobile'
import './Login.scss'
import { create_collListrequest_action, create_shopedit_request_action } from '../store/actionCreate/index'
import { connect } from 'react-redux'
class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            phone: '',
            pass: ''
        }
    }
    handleChange(e) {
        this.setState({ [e.target.name]: (e.target.value) }, () => {
            console.log(this.state)
        })
    }
    handleClick() {
        if (this.state.phone === '') {
            alert('手机号不能为空')
        } else if ((/^1[3-9]\d{9}$/).test(this.state.phone) == false) {
            alert('手机号不正确')
        } else if (this.state.pass === "") {
            alert('密码不能为空')
        } else {
            user_login(this.state).then((res) => {
                if (res.data.status == 'no') {
                    console.log(res.data)
                    Toast.show({
                        icon: 'fail',
                        content: res.data.msg,
                    })
                } else {
                    console.log(res.data)
                    Toast.show({
                        icon: 'success',
                        content: res.data.msg,
                    })
                    // 保存token和用户信息
                    localStorage.setItem('token', res.data.token)
                    let userinfo = JSON.stringify(res.data.userinfo)
                    localStorage.setItem('userinfo', userinfo)
                    this.props.history.push('/index')
                    // 获取收藏列表
                    this.props.collListrequest();
                    //获取购物车列表
                    this.props.addshop_request()
                }

            })
        }
    }

    render() {
        return (
            <div className='log'>
                <h1>登录</h1>
                <div className="login">
                    <input type="name" name='phone' value={this.state.phone} onChange={(e) => { this.handleChange(e) }} placeholder='请输入手机号' />
                    <input type="password" name='pass' value={this.state.pass} onChange={(e) => { this.handleChange(e) }} placeholder='请输入密码' />
                    <input type="submit" onClick={() => { this.handleClick() }} value={'登录'} style={{ backgroundColor: 'hotpink', color: 'white', fontSize: "16px" }} />
                    <p style={{ color: "white" }} onClick={() => { this.props.history.push('/register') }}>注册</p>
                </div>

            </div>
        );
    }
}

// export default Login;

export default connect(
    (state) => {
        return {
            collList: state.collList
        }
    },
    (dispatch) => {
        return {
            collListrequest: function (payload) {
                dispatch(create_collListrequest_action(payload))
            },
            addshop_request: function (payload) {
                dispatch(create_shopedit_request_action(payload))
            }
        }
    }
)(Login)
